<template>
    <div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <div class="box">
                <el-radio-group v-model="greenLand.waringGrade" text-color="'red" :fill="'#ffffff'">
                    <el-radio  :label="1" border class="redio1"><i class="el-icon-warning-outline"></i>一级警报</el-radio>
                    <el-radio  :label="2" border class="redio2"><i class="el-icon-warning-outline"></i>二级警报</el-radio>
                    <el-radio  :label="3" border class="redio3"><i class="el-icon-warning-outline"></i>三级警报</el-radio>
                    <el-radio  :label="4" border class="redio4"><i class="el-icon-warning-outline"></i>四级警报</el-radio>
                </el-radio-group>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="setWaring()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { AxiosPost,AxiosGet } from '../../axios'
export default {
    name: 'SettingWaring',

    data() {
        return {
             dialogVisible: false,
             greenLand:[]
        };
    },

    mounted() {
        
    },

    methods: {
         show(){
             this.dialogVisible=true
             console.log(this.greenLand);
             if(this.greenLand.waringGrade == null ){
                 this.greenLand.waringGrade = 4
             }
         },
         handleClose(done) {
            this.$confirm('您还没有保存,确认关闭吗？')
          .then(_ => {
              console.log(_);
            done();
          })
          .catch(_ => {console.log(_);});
        },
         findAll(){
            AxiosGet('greenLand/findAll','').then(sucess=>{
            this.$ls.set('greenLandList',sucess.data,30*60*1000)
            }).catch(error=>{
                console.log(error);
        })},
        setWaring(){
            console.log(this.greenLand);
            AxiosPost('greenLand/updateWeb',this.greenLand).then(sucess=>{
                if(sucess.status==200){
                    this.$notify({title: 'sucess',message:"设置警报成功！",type: 'success'});
                    this.findAll()
                }
                
                this.dialogVisible=false
            })
            
        }
    },
};
</script>

<style scoped>
.el-radio{
      margin-left: 0;
}
.box{
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
}
.redio1{
    width: 80%;
    margin-bottom:20px ;
    background-color: red;
    color: #fff;
    margin-left: 10px;
}
.redio2{
     width: 80%;
     margin-left: 0;
     margin-bottom:20px ;
     background-color: rgb(238, 189, 63);
    color: #fff;
}
.redio3{
     width: 80%;
     margin-bottom:20px ;
     background-color: green;
    color: #fff;
     
}
.redio4{
     width: 80%;
      margin-bottom:20px ;
      background-color: rgb(45, 112, 183);
    color: #fff;
}
</style>